<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="/common/include/page.jsp"%>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="zh-CN" lang="zh-CN">
<head>
<title>在线生成 QR Code</title>
<meta http-equiv="Content-Type" content="text/html; charset=GBK" />
<meta http-equiv="Content-Language" content="zh-CN" />
<meta name="keywords"
	content="OSCHINA.NET 在线工具,ostools,jsbin,加密/解密，Markdown,less,java api,php api,node.js api,QR Code" />
<meta name="description"
	content="OSCHINA.NET在线工具,ostools为开发设计人员提供在线工具，提供jsbin在线 CSS、JS 调试，在线 Java API文档,在线 PHP API文档,在线 Node.js API文档,Less CSS编译器，MarkDown编译器等其他在线工具" />
<link rel="shortcut icon" href="/img/favicon.ico" type="image/x-icon" />
<link rel="stylesheet" href="${rootPath }/common/resource/qrcode/basic.css?20120912" type="text/css" />
<script type="text/javascript"
	src='${rootPath }/common/resource/jquery-3.3.1.min.js'></script>

<link rel="stylesheet"
	href='${rootPath }/common/resource/bootstrap/css/bootstrap.min.css' />
<script src='${rootPath }/common/resource/bootstrap/js/bootstrap.min.js'></script>

</head>
<body>
	<!--     头部header开始    -->
	<%@ include file="/common/include/header.jsp"%>
	<div id="header">
		<div class="wrapper">
			<div id="mainSearch">

				<!-- Put the following javascript before the closing </head> tag. -->
				<style>
						.go_search {
							width: 300px;
						}
						
						.go_search .gsc-input td, .go_search .gsc-input tddiv {
							padding: 0 0 0 0;
							margin: 0 0 0 0;
							height: 23px;
						}
						
						.go_search .gsc-input input:focus {
							border: none;
						}
						
						.go_search .gsc-input input {
							border: none;
							height: 23px;
							width: 100%;
							padding: 0px;
							border: none;
							margin: 0px;
							height: auto;
							outline: none;
							-webkit-box-shadow: none;
							-moz-box-shadow: none;
							box-shadow: none;
							background-image:
								url(../img/google_custom_search_watermark.gif?20140625);
							background-color: rgb(255, 255, 255);
							background-position: 0% 50%;
							background-repeat: no-repeat no-repeat;
						}
				</style>
				 
			</div>
			 
		</div>
	</div>
	<!--     头部header结束    -->
	<script type="text/javascript" src="${rootPath }/common/resource/qrcode/tag_osc.js?date=201903010"></script>
	<div class="wrapper ad-wrap" style="margin-top: 15px">
		<script type="text/javascript" src="${rootPath }/common/resource/qrcode/tag.js?date=20140625"></script>
	</div>
			<style>
				.leftBar .title, .rightBar .title, .topBar .title {
					margin-bottom: 10px;
				}
				
				.bottomBar .title {
					margin: 10px 0;
				}
				
				.topBar input[type='submit'] {
					margin-left: 10px;
				}
				
				.OptDetail {
					text-align: center;
					margin-left: 30px;
				}
				
				.OptDetail li {
					width: 120px;
					margin: 5px 0px 10px 0px;
				}
				
				.OptDetail select {
					margin: 5px 0px 10px 0px;
					text-align: center;
				}
				
				#pwd {
					width: 110px;
				}
				
				#qrcode img {
					margin: auto;
				}
				
				.QRCodeDiv {
					border: 1px solid #ccc;
					width: 430px;
					height: 500px;
					background-color: #eee;
					text-align: center;
				}
				
				.QRWrapper {
					height: auto;
					display: inline-block;
					line-height: 500px;
				}
				
				.QRWrapper img {
					vertical-align: middle;
				}
				</style>
	<script type="text/javascript" src="${rootPath }/common/resource/qrcode/jquery.form-2.82.js"></script>
	<script type="text/javascript">
	$(document).ready(function(){
				$("#submit").click(function(){
			var url = "${rootPath}/common/resource/generate?" + $("#qrcode_form").serialize();
			$(".QRCodeDiv img").attr("src",url+"&"+new Date().getTime());
			$("#gen_url").attr("href",url);
		});
		    	$("#zxing").popover({
    		'title':'条形码处理类库 ZXing',
    		'content':'ZXing是一个开源Java类库用于解析多种格式的1D/2D条形码。目标是能够对QR编码、Data Matrix、UPC的1D条形码进行解码。 其提供了多种平台下的客户端包括：J2ME、J2SE和Android。',
			'placement':'bottom'
    	});
	});
</script>
	<div id="mainContent" class="wrapper">
		<div class="toolName">
			在线生成二维码(QR码) 
		</div>
		<div class="toolUsing clearfix">
			<div class="toolsTab  clearfix">
				<ul class="nav nav-tabs">
					<li class="active"><a href="${rootPath }/QrCode.htm" class="btn btn-primary" style="width: 80px;" >转QR码</a></li>
					<li><a href="${rootPath }/Encode.htm" class="btn btn-primary" style="width:  150px;" >二维码解码</a></li>
				</ul>
				<div class="clear"></div>
			</div>
			<form action="${rootPath }/QrCode.htm" method="get">
				<div class="leftBar">
					<div class="title">URL或其他文本:</div>
					<textarea class="input-xlarge" name="qrcode"> http://45.35.10.100:10001/link/facebook.htm</textarea>
				</div>
				<div class="operateLR">
					<div class="OptDetail span1">
						<label>输出格式:</label> 
						<select name="output" class="span1">
							<option value="GIF"  >GIF</option>
							<option value="JPEG">JPEG</option>
							<option value="PNG" selected>PNG</option>
						</select> 
						<label>纠错级别:</label> 
						<select name="error" class="span1">
							<option value="L" selected>L 7%</option>
							<option value="M">M 15%</option>
							<option value="Q">Q 25%</option>
							<option value="H">H 30%</option>
						</select>  
						<input type="submit" class="btn btn-primary" style="width: 80px;" value="提交">
					</div>
				</div>
				<div class="rightBar">
					<div class="title">QR码：</div>
					<div class="QRCodeDiv">
						<div class="QRWrapper">
								<img src="${rootPath }/getQRCode" /></a>
						</div>
					</div>
				</div>
			</form>
		</div>
	</div>

	 
	<!--     尾部footer结束    -->
	<div class="modal hide fade" id="advice" style="display: none;">
		<div class="modal-header">
			<button type="button" class="close" data-dismiss="modal">×</button>
			<h3>在线生成 QR Code</h3>
		</div>
		 
	</div>
	<script>
function verifyEmail(){
	if(null == $("#advice_email").val().match(/^\w+([-+.']\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/)){
		$("#email_error").html(" email输入错误 ");
		$("#advice_email").focus();
	}
	else{
		$("#email_error").html("<i class='icon-ok'></i>");
		$("#advice_submit").removeAttr("disabled");
	}
}
$(document).ready(function (){
	$("#advice_submit").click(function (){
		$.post("/action/advice/add_advice",
		{ tool_name : $("#tool_name_f").val() , email: $("#advice_email").val(), content: $("#advice_content").val() ,verifyCode: $("#verifyCode").val()},
		function (result){
			var m=eval('(' + result + ')');
			if("ok"==m.msg){
				alert("谢谢您的建议，我们会参考您的建议使ostools变得更好！");
				$('#advice').modal('hide');
				$("#captcha_code").attr("src",'/action/jsbin/captcha?'+new Date().getTime());
			}
			else{
				alert(m.msg);
			}
		});
	});
});
</script>
	 <%@ include file="/common/include/footer.jsp"%>
</body>
</html>
